<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline="true" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
                <el-row class="search-input">
                    <el-form-item label="虚拟仓：">
                        <el-input v-model="searchFilters.name" placeholder="请输入拟合仓编码或名称"></el-input>
                    </el-form-item>
                    <el-form-item label="仓库状态：">
                        <el-select v-model="searchFilters.status">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="停用" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="实体仓：">
                        <el-select v-model="searchFilters.warehouseId" filterable placeholder="请选择">
                            <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="店铺：">
                        <el-select v-model="searchFilters.shopId" filterable placeholder="请选择">
                            <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商家：">
                        <el-select v-model="searchFilters.deptId">
                            <el-option v-for="item in selectedOptionsData1" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <!-- 搜索区域按钮-查询,重置 -->
                <el-row class="search-button">
                    <el-form-item>
                        <!--查询:蓝色图标-->
                        <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                        <!--重置:白色图标-->
                        <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-row class="t_r w100">
                <el-button-group>
                    <el-button type="primary" size="small" @click="add()">新增</el-button>
                    <el-button type="primary" size="small" @click="unEnables()">停用</el-button>
                    <el-button type="primary" size="small" @click="Enables()">启用</el-button>
                </el-button-group>
            </el-row>
            <!-- 表格数据部分 -->
            <div class="table-wrap">
                <jic-table :height="350" :operationWidth="200" :tableList="tableList" :showEditOperation="true" :showDeleteOperation="false" :tableHeaderList="tableHeaderList" :totalSize="totalSize" :showDetailOperation="false" :showBatchDelete="false" :showSelection="true" :showOperation="true" :showIndex="false" @findPage="findPage" @handleDelete="handleDelete" @handleDetail="handleDetail" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" @selectionChange="selectionChange" @handleEdit="handleEdit" ref="jicTable"></jic-table>
            </div>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";

//二.数据输出区
export default {
    //2.1 注册组件
    components: {
        jicTable
    },

    //2.2 数据初始化区
    data() {
        return {
            options1: [], //实体仓数据
            options2: [], //店铺数据
            selections: [], //多选框内容
            size: "mini",
            dataForm: {
                deleteFlag: 0
            }, //表单内容数据
            dataFormRules: {
                name: [{
                    required: true,
                    message: "请输入仓库名称",
                    trigger: "blur"
                }],
                status: [{
                    required: true,
                    message: "请选择仓库状态",
                    trigger: "change"
                }],
                productId: [{
                    required: true,
                    message: "请选择商家",
                    trigger: "change"
                }],
                addressDetail: [{
                    required: true,
                    message: "请输入详细地址",
                    trigger: "blur"
                }],
                ownerId: [{
                    required: true,
                    message: "请选择仓库负责人",
                    trigger: "change"
                }],
                ownerMobile: [{
                    required: true,
                    message: "请输入负责人电话",
                    trigger: "blur"
                }]
            },
            selectedOptionsData1: [],

            //2.2.1 公共数据初始化
            pageIndex: 0,
            pageSize: 10,
            totalSize: 0, //// 返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [], // 表格列表数据
            searchSize: "mini",

            // 2.2.2 表格表头数据
            tableHeaderList: [{
                    prop: "deptId",
                    label: "商家",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "code",
                    label: "虚拟仓编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "name",
                    label: "虚拟仓名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "status",
                    label: "仓库状态",
                    minWidth: 100,
                    formatter: this.formatterStatus
                },
                {
                    prop: "createTime",
                    label: "创建时间",
                    minWidth: 100,
                    formatter: null
                }
            ], // 2.2.3 搜索表单对应的数据对象初始化
            searchFilters: {
                status: null,
                storeId: null,
                productId: null,
                shopId: null,
                limits: null,
                deleteFlag: 0
            },
            restaurants: [],
            dialogVisible: false //// 是否显示弹窗内容;
        }; //return 完结;
    }, //data()方法 完结;

    //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
        this.findPage();
        let this_ = this;
        this.utils.request.queryMerchantListOther({
            deleteFlag: 0
        }, function (res) {
            if (res.code == "0000") {
                this_.selectedOptionsData1 = res.data;
            }
        });
        //加载店铺和实体仓下拉框数据
        //实体仓
        this.utils.request.getMStoreList({
            deleteFlag: 0,
            type: 1
        }, function (res) {
            if (res.code == "0000") {
                this_.options1 = res.data;
            }
        });
        //店铺
        this.utils.request.getMStoreList({
            deleteFlag: 0,
            type: 2
        }, function (res) {
            if (res.code == "0000") {
                this_.options2 = res.data;
            }
        });
    },
    //2.3 JavaScript 方法区
    methods: {
        //2.请求列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {
                    deleteFlag: 0
                };
            }
            this_.searchFilters.pageNum =
                pageNum === null || pageNum === undefined ?
                this.pageRequest.pageNum :
                pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this_.searchFilters.deleteFlag = 0;
            this.utils.request.findMStoreVirtualPage(this_.searchFilters, function (
                res
            ) {
                if (res.code === "0000") {
                    this_.tableList = res.data.rows;
                    this_.totalSize = Number(res.data.total);
                } else {
                    this_.tableList = [];
                    this_.totalSize = 0;
                }
            });
        },

        // 3.重置搜索框条件
        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 4.详情按钮对应的方法(TODO 需要修改路径)
        handleDetail(params) {
            this.$router.push({
                path: "/getMstoreVirtualDetail/" + params.row.id
            });
        },
        //编辑
        handleEdit(params) {
            this.$router.push({
                path: "/getMstoreVirtualDetail/" + params.row.id + "/" + 1
            });
        },

        // 5.请求条数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
            this.findPage(null);
        },

        // 6.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },
        // 7.页面弹窗处理方法
        add() {
            this.$router.push({
                path: "/getMstoreVirtualDetail/" + "0"
            });
        },

        // 8.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },
        handleDelete(data) {
            this.$confirm("确认删除吗？", "提示", {}).then(() => {
                var params = data.row;
                var this_ = this;
                this.utils.request.deleteMStoreVirtualByPrimaryKey(params, function (
                    res
                ) {
                    if (res.code == "0000") {
                        this_.$message({
                            message: "操作成功",
                            type: "success"
                        });
                        this_.findPage(null);
                    } else {
                        this_.$message({
                            message: "操作失败, " + res.msg,
                            type: "error"
                        });
                    }
                });
            });
        },
        //批量启用
        Enables() {
            let that = this;
            if (that.selections.length == 0) {
                this.$message({
                    showClose: true,
                    message: "必须选中一条数据!",
                    type: "warning"
                });
                return;
            }
            let flag = false;

            for (let i = 0; i < this.selections.length; i++) {
                if (this.selections[i].status == "1") {
                    flag = true;
                }
            }
            if (flag) {
                this.$message({
                    showClose: true,
                    message: "选中仓库必须为未启用状态!",
                    type: "warning"
                });
                return;
            }
            let ids = [];
            for (let i = 0; i < this.selections.length; i++) {
                ids.push(this.selections[i].id);
            }
            //调用方法、
            this.utils.request.updateVirtualStoreStatus({
                    ids: ids,
                    status: "1"
                },
                function (res) {
                    if (res.code == "0000") {
                        that.$message({
                            message: "操作成功",
                            type: "success"
                        });
                        that.findPage(null);
                    } else {
                        that.$message({
                            message: "操作失败, " + res.msg,
                            type: "error"
                        });
                    }
                }
            );
        },
        //批量停用
        unEnables() {
            let that = this;
            if (that.selections.length == 0) {
                this.$message({
                    showClose: true,
                    message: "必须选中一条数据!",
                    type: "warning"
                });
                return;
            }
            let flag = false;

            for (let i = 0; i < this.selections.length; i++) {
                if (this.selections[i].status == "0") {
                    flag = true;
                }
            }
            if (flag) {
                this.$message({
                    showClose: true,
                    message: "选中仓库必须为已启用状态!",
                    type: "warning"
                });
                return;
            }
            let ids = [];
            for (let i = 0; i < this.selections.length; i++) {
                ids.push(this.selections[i].id);
            }
            //调用方法、
            this.utils.request.updateVirtualStoreStatus({
                    ids: ids,
                    status: "0"
                },
                function (res) {
                    if (res.code == "0000") {
                        that.$message({
                            message: "操作成功",
                            type: "success"
                        });
                        that.findPage(null);
                    } else {
                        that.$message({
                            message: "操作失败, " + res.msg,
                            type: "error"
                        });
                    }
                }
            );
        },
        // 选中列表中的选项触发
        selectionChange(selections) {
            this.selections = selections.selections;
        },
        formatterStatus(row) {
            if (row.status == "0") {
                return "停用";
            } else {
                return "启用";
            }
        }

        //==========2.3.1 JavaScript 自定义方法区==========
    }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 0 10px 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
